<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>登录</title>
        <link rel="stylesheet" th:href="@{/css/layui.css}" />
        <link rel="stylesheet" th:href="@{/css/login.css}" />
    </head>
    <body>
        <!-- 粒子背景 -->
        <div id="particles-js"></div>
        <!-- 登录表单 -->
        <form action="/blog/user/login" class="layui-form login-form layui-panel" autocomplete="off">
            <h1 onclick="location.href='/index'" class="login-title">
<!--                <img style="height: 30px" src="img/logo.png" alt="logo" />-->
                <span>博客系统用户登录</span>
            </h1>
            <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
            <!-- 用户名 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-username"></i>
                <input type="text" name="username" placeholder="请输入用手机号" class="layui-input"  lay-reqText="请输入用户名" />
            </div>
            <!-- 密码 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-password"></i>
                <input type="password" name="password" placeholder="请输入密码" class="layui-input" lay-verify="required" lay-reqText="请输入密码" />
            </div>
            <!-- 验证码 -->
            <div class="layui-form-item">
                <i class="layui-icon layui-icon-vercode"></i>
                <input type="text" name="captcha" placeholder="请输入验证码" class="layui-input" lay-verify="required" lay-reqText="请输入验证码" />
                <img onclick="changeValidateCode(this)" id="captcha" src="/randoms" alt="验证码生成失败！" />
            </div>

            <div class="layui-form-item">
                <button class="layui-btn layui-btn-normal layui-btn-fluid"  type="submit" >登录</button>
            </div>
            <div class="layui-form-item">
                <input type="button" value="注册" onclick="location.href='/user-register'" class="layui-btn layui-btn-normal layui-btn-fluid">
            </div>
        </form>
        <script th:src="@{/js/layui.js}"></script>
        <script th:src="@{/js/jquery.min.js}"></script>
        <script th:src="@{/js/particles.js}"></script>
        <script>
            //验证码
            function changeValidateCode(obj) {
                //获取当前的时间作为参数，读取时就不会读取缓存中的内容
                var timenow = new Date().getTime();
                //每次请求需要一个不同的参数，否则可能会返回同样的验证码
                //这和浏览器的缓存机制有关系，也可以把页面设置为不缓存，这样就不用这个参数了。
                obj.src="/randoms?d="+timenow;
            }

            layui.use(["form"], function () {
                const form = layui.form;
                //监听提交
                form.on("submit(login)", function (data) {
                    //调用登录接口
                    layer.msg("登录成功");
                });
            });



        </script>
    </body>
</html>
